<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const pieData = [
    {
      name: "淘宝",
      value: 11231,
    },
    {
      name: "京东",
      value: 22673,
    },
    {
      name: "唯品会",
      value: 6123,
    },
    {
      name: "1号店",
      value: 8989,
    },
    {
      name: "聚美优品",
      value: 6700,
    },
  ];
  const option = {
    series: [
      {
        type: "pie",
        data: pieData,
      },
    ],
  };

  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    series: [
      {
        type: "pie",
        data: pieData,
        label: {
          // 饼图文字的显示
          show: true, // 显示文字
          //formatter: 'hehe' // 决定文字显示的内容
          formatter: function (arg) {
            // console.log(arg)
            return arg.name + "平台" + arg.value + "元\n" + arg.percent + "%";
          },
        },
        // radius: 20 // 饼图的半径
        // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
        // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
        roseType: "radius", // 南丁格尔图 饼图的每一个区域的半径是不同的
        selectedMode: "single", // 选中的效果,能够将选中的区域偏离圆点一小段距离
        // selectedMode: "multiple",
        selectedOffset: 30,
      },
    ],
  };
});
</script>